<template>
  <!-- 给地图宽高以及style写样式 (width和height是按百分比设置，且只能传数字)-->
  <!-- <m-box :width = "100" :height = "100"></m-box> -->
   <!-- m-box -->
  <!-- <m-box></m-box> -->
  <div>
         <color-map></color-map>

  </div>
  <!-- <el-header style="height:130px;" > -->
    <!-- 头1 -->
    <!-- <el-row class="title1">
      <el-col :span="20">
        <div class="title-t">
          <router-link to="/welcome"><span>政府投资项目审计监督平台 </span></router-link>
        </div>
      </el-col>
      <el-col :span="4">
          <div class="title-right dropdown"  >
            <div v-if="tokenShow" class="logined" >
              <div>
                <a href="#/welcome">
              <i class="el-icon-location-outline"></i>
              <span>返回首页</span>
              </a>
              </div>
              <div>
                <i class="el-icon-user-solid"></i>
              <span  @click="logout">退出</span>
              </div>
            </div>
            <div v-else class="logined1">
              <i class="el-icon-user-solid"></i>
               <span  @click="login" >登录</span>
            </div>
          </div>
      </el-col>
    </el-row> -->

    <!-- <el-row>
      <div class="top_map">
      <color-map></color-map>
      </div>
    </el-row> -->
  <!-- </el-header> -->
</template>
<script>
  import mBox from '@/components/gismap/index.vue'
  import colorMap from '@/components/map/index.vue'
  import { getToken } from '@/utils/auth'
  export default {
    data() {
      return {
        size : '',
        active : '',
        tokenShow:false,
      }
    },
    components: {
      mBox,
      colorMap
    },
    mounted () {
      this.showToken()
    },
    methods: {
      showToken(){
        if(getToken()){
          this.tokenShow = true
        }

      },
      mouseOver(){
        this.active = " color: black;"
      },
      mouseLeave(){
        this.active = "color: white;"
      },
      async login(){
         this.$router.push('/login')
      },
      async logout() {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push('/login')
        })
    }

    }
  }
</script>

<style lang="scss" scoped>
  .qdl {
    color: white;
  }

  .title1 {
    padding: 10px;
    background-image: url(../../../assets/image/sjpic.jpg);
    background-size: 100% 100%;
    background-color: rgb(76, 170, 250);
    margin-right: 20px;
    width: 98%;
    display: block;
    position: fixed;
    z-index: 10000;
  }

  .title-t {
    font-size: 40px;
    font-weight: bold;
    color: white;
    text-align: left;
    margin-left: 110px;
    font-family: 华光黑变_CNKI;
    padding-top: 35px;
    padding-bottom: 18px;
    opacity:1;
  }

  .title-right {
    // text-align: right;
    padding-top: 100px;
  }

  .el-container {
    height: 100vh;
  }

  .top_map{
    margin-top: 100px;
  }
  .logined{
    display: flex;
    justify-content: space-around;
    color: white;
  }
  .logined div:first-child:hover{
    color: black;
  }
  .logined div:last-child:hover{
    color: black;
  }
  .logined1{
    display: flex;
    color: white;
    cursor: pointer;
  }
  .logined1 div:first-child:hover{
    color: black;
  }
  .logined1 div:last-child:hover{
    color: black;
  }
  .dropdown {
    position: relative;
    display: block;
    cursor: pointer;
  }

</style>
